//引入主题色

// 明亮主题颜色
$primary_color: #2d8cf0;
$primary_light_color: #0f1011;
$primary_dark_color: #2b85e4;
$success_color: #19be6b;
$warning_color: #ff9900;
$error_color: #ed3f14;
$handle-btn-color: #438cde;

$theme_color: #f31947;

$border_color: #dddee1;
$title_color: #8c8c8c;
$light_title_color: #1c2438;
$light_content_color: #495060;
$light_sub_color: #80848f;
$light_background_color: #f5f5f7;
$light_white_background_color: #fff;
// 暗黑主题颜色
$dark_background_color: #141414;
$dark_sub_background_color: #1d1d1d; //稍微浅一点的
$dark_content_color: #d5d5d5;

//-------------------------
/* 行为相关颜色 #ff6700 #83c44e #45b035 #ff6700*/
$color-primary: #fe1758;
$color-success: #83c44e;
$color-warning: #f0ad4e;
$color-error: #dd524d;

$color-main-1: #fe1758;
$color-main-2: #a8c90a;
$color-main-3: #ea1a56;
$color-main-4: #e24329;
$color-main-5: #fc6d26;
$color-main-6: #fca326;
$color-main-7: #f79400;
$color-main-8: #a5c500;
$color-main-9: #6cc644;
$color-main-0: #34a853;

$theme_color: #f02e4c;

/* 文字基本颜色 */
$text-color: #333; //基本色
$text-color-inverse: #fff; //反色
$text-color-grey: #999; //辅助灰色，如加载更多的提示信息
$text-color-placeholder: #808080;
$text-color-disable: #c0c0c0;

/* 背景颜色 */
$bg-color: #ffffff;
$bg-color-grey: #f5f5f5;
$bg-color-gray: #b0b0b0;
$bg-color-hover: #f1f1f1; //点击状态颜色
$bg-color-mask: rgba(0, 0, 0, 0.5); //遮罩颜色

/* 边框颜色 */
$border-color: #e0e0e0;

/* 页面宽度 */
$page-width: 1200px;

.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}
.gray {
  color: gray;
}
.warning {
  color: orange;
}

// flex布局且垂直居中
%flex-align-center {
  display: flex;
  align-items: center;
}

//-------------------------

.wes-2 {
  /* 适用于webkit内核和移动端 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/***** 封装一些方法可用于 黑暗主题 ，明亮主题 *****/

// 背景颜色
@mixin background_color($color) {
  /*通过该函数设置字体颜色，后期方便统一管理；*/
  background-color: $color;
  transition: 0.35s;

  [data-theme="dark"] & {
    background-color: $dark_background_color;
  }

  [data-theme="light"] & {
    background-color: $light_background_color;
  }
}

// 辅助背景颜色
@mixin sub_background_color($color) {
  /*通过该函数设置字体颜色，后期方便统一管理；*/
  background-color: $color;
  transition: 0.35s;

  [data-theme="dark"] & {
    background-color: $dark_sub_background_color;
  }

  [data-theme="light"] & {
    background-color: $light_background_color;
  }
}

@mixin white_background_color() {
  /*通过该函数设置字体颜色，后期方便统一管理；*/
  background-color: $light_white_background_color;
  transition: 0.35s;

  [data-theme="dark"] & {
    background-color: $dark_sub_background_color;
  }

  [data-theme="light"] & {
    background-color: $light_white_background_color;
  }
}

// 正文颜色
@mixin content_color($color) {
  /*通过该函数设置字体颜色，后期方便统一管理；*/
  color: $color;

  [data-theme="dark"] & {
    color: $dark_content_color;
  }

  [data-theme="light"] & {
    color: $light_content_color;
  }
}

// 辅助颜色
@mixin sub_color($color) {
  /*通过该函数设置字体颜色，后期方便统一管理；*/
  color: $color;

  [data-theme="dark"] & {
    color: $dark_content_color;
  }

  [data-theme="light"] & {
    color: $light_sub_color;
  }
}

// 标题颜色
@mixin title_color($color) {
  /*通过该函数设置字体颜色，后期方便统一管理；*/
  color: $color;

  [data-theme="dark"] & {
    color: $dark_content_color;
  }

  [data-theme="light"] & {
    color: $light_title_color;
  }
}

// 全局变量
.global_color {
  color: $theme_color;
}

.global_background_color {
  background-color: $theme_color;
}

.global_text_left {
  text-align: left;
}

.global_text_right {
  text-align: right;
}

.global_float_left {
  float: left;
}

.global_float_right {
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.width_1200 {
  width: 1200px;
}

.width_800 {
  width: 800px;
}

.width_400 {
  width: 400px;
}

.width_300 {
  width: 300px;
}

.width_200 {
  width: 200px;
}

.width_100 {
  width: 100px;
}

.fontsize_12 {
  font-size: 12px;
}

.fontsize_14 {
  font-size: 14px;
}

.fontsize_16 {
  font-size: 16px;
}

.fontsize_18 {
  font-size: 18px;
}

.mb_20 {
  margin-bottom: 20px;
}

.mt_20 {
  margin-top: 20px;
}

.ml_20 {
  margin-left: 20px;
}

.mr_20 {
  margin-right: 20px;
}

.mb_24 {
  margin-bottom: 24px;
}

.mt_24 {
  margin-top: 24px;
}

.ml_24 {
  margin-left: 24px;
}

.mr_24 {
  margin-right: 24px;
}

.mb_10 {
  margin-bottom: 10px;
}

.mt_6 {
  margin-top: 6px;
}

.mt_8 {
  margin-top: 8px;
}

.mt_10 {
  margin-top: 10px;
}

.mt_12 {
  margin-top: 12px;
}

.ml_10 {
  margin-left: 10px;
}

.mr_10 {
  margin-right: 10px;
}

.pb_20 {
  padding-bottom: 20px;
}

.pt_20 {
  padding-top: 20px;
}

.pl_20 {
  padding-left: 20px;
}

.pr_20 {
  padding-right: 20px;
}

.pb_10 {
  padding-bottom: 10px;
}

.pt_10 {
  padding-top: 10px;
}

.pl_10 {
  padding-left: 10px;
}

.pr_10 {
  padding-right: 10px;
}

.color999 {
  color: #999;
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  // overflow: hidden;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.hover-color:hover {
  color: $theme_color !important;
  cursor: pointer;
  .item-coupon {
    color: $theme_color !important;
  }
}

.hover-pointer {
  cursor: pointer;
}

.center {
  margin: 0 auto;
}

.relative {
  position: relative;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-decorate {
  width: 200px;
  text-align: center;
  font-size: 25px;
  position: relative;
  font-weight: bold;
  margin: 30px auto 30px;

  &::before,
  &::after {
    content: "";
    display: inline-block;
    width: 25px;
    height: 20px;
    background-size: 50px 20px;
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    top: 10px;
    left: -3px;
  }

  &::after {
    background-position: -24px 0;
    right: -3px;
    left: auto;
  }
}

.flex {
  display: flex;
}

.flex-a-c {
  align-items: center;
}

.flex-j-sb {
  justify-content: space-between;
}

.flex-j-c {
  justify-content: center;
}

.width_1200_auto {
  width: 1200px;
  margin: 0 auto;
}

//  goodsList

.text-danger {
  color: $theme_color;
}

.seckill-price {
  margin-right: 5px;
  font-size: 24px;
  font-weight: bold;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

.goods-show-info {
  width: 250px;
  padding: 5px;
  margin: 10px 0px;
  margin-left: 5px;
  position: relative;
  border: 1px solid #fff;
  cursor: pointer;
  background-color: #fff;
}

.goods-show-info:hover {
  border: 1px solid #ccc;
  box-shadow: 0px 0px 15px #ccc;
}

.goods-show-price {
  margin-top: 6px;
}

.goods-show-detail {
  font-size: 12px;
  margin: 6px 0px;
}

.goods-show-num {
  font-size: 12px;
  margin-bottom: 6px;
  color: #666;
}

.goods-show-num {
  font-size: 12px;
  margin-bottom: 6px;
  color: #009688;
}

.goods-show-num span {
  color: #005aa0;
  font-weight: bold;
}

.goods-show-seller {
  font-size: 12px;
  color: $theme_color;
}

.goods-page {
  margin: 10px auto;
  text-align: right;
  width: 1200px;
}
